<template>
  <div class="basic">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入商品名称" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="formData.description" type="textarea" placeholder="请输入商品描述"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="所属品牌" clearable prop="brandId">
        <el-select v-model="formData.brandId" clearable placeholder="请选择">
          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">{{
            item.name
            }}
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所属地州" clearable prop="regionId">
        <el-select v-model="formData.regionId" clearable placeholder="请选择">
          <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id">{{
            item.name
            }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="销售价" prop="price">
        <el-input v-model="formData.price" placeholder="请输入原价格" :style="{width: '100%'}"></el-input>
        <el-row style="color: red;font-size: 10px">
          注意：该销售价在没有设置sku时，该价格会作为商品付款金额
        </el-row>
      </el-form-item>
      <el-form-item label="促销价" prop="promotionPrice">
        <el-input v-model="formData.promotionPrice" placeholder="请输入促销价" clearable :style="{width: '100%'}">
        </el-input>
        <el-row style="color: red;font-size: 10px">
          注意：该价格不会为商品真实付款金额
        </el-row>
      </el-form-item>
      <el-form-item label="赠送积分">
        <el-input v-model="formData.giftPoint" placeholder="请输入商品积分" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="产品服务">
        <el-select v-model="formData.serviceIds" multiple placeholder="请选择产品服务" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in serviceIdsOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input v-model="formData.stock" placeholder="请输入库存" clearable :style="{width: '100%'}"></el-input>
        <el-row style="color: red;font-size: 10px">
          注意：该库存为当前商品的总库存，当有sku时，该库存为sku的总库存之和
        </el-row>
      </el-form-item>
      <el-form-item label="预警库存" prop="lowStock">
        <el-input v-model="formData.lowStock" placeholder="请输入预警库存" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="商品状态" prop="status">
        <el-select v-model="formData.status" placeholder="请选择商品状态" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠方式">
        <el-button size="small" :class="{'tab-active': tab==0}" @click="tabType(0)">无优惠</el-button>
        <el-button size="small" :class="{'tab-active': tab==1}" @click="tabType(1)">阶梯价格</el-button>
        <el-button size="small" :class="{'tab-active': tab==2}" @click="tabType(2)">满减价格</el-button>
        <div v-if="tab==1">
          <el-table :data="formData.ladderArr" style="width: 100%">
            <el-table-column prop="quantity" label="数量" width="180">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.count"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="discount" label="折扣" width="180">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.discount"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.$index)" v-if="formData.ladderArr.length>1">删除</el-button>
                <el-button @click="handleAdd">添加一行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-if="tab==2">
          <el-table :data="formData.fullArr" style="width: 100%">
            <el-table-column prop="quantity" label="满" width="180">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.fullPrice">
                  <template slot="suffix">元</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="discount" label="立减" width="180">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.reducePrice">
                  <template slot="suffix">元</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="handleFullDelete(scope.$index)" v-if="formData.fullArr.length>1">删除</el-button>
                <el-button @click="handleFullAdd">添加一行</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
  import { getBrandName, getRegionName } from "@/api/common/common";

  export default {
    components: {},
    props: {
      value: [Object],
    },
    data() {
      return {
        formData: {
          name: undefined,
          description: undefined,
          price: undefined,
          promotionPrice: undefined,
          serviceIds: undefined,
          stock: undefined,
          lowStock: undefined,
          status: undefined,
          regionId: null,
          brandId: null,
          giftPoint: null,
          promotionType: 0,
          /** 满减数据 */
          ladderArr: [
            {
              count: 0,
              discount: 0
            },
          ],
          /** 阶梯数据 */
          fullArr: [
            {
              fullPrice: 0,
              reducePrice: 0
            }
          ]
        },
        rules: {
          name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }],
          description: [{
            required: true,
            message: '请输入商品描述',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入原价格',
            trigger: 'blur'
          }],
          promotionPrice: [{
            required: true,
            message: '请输入销售价',
            trigger: 'blur'
          }],
          serviceIds: [{
            required: true,
            message: '请选择产品服务',
            trigger: 'change'
          }],
          stock: [{
            required: true,
            message: '请输入库存',
            trigger: 'blur'
          }],
          lowStock: [{
            required: true,
            message: '请输入预警库存',
            trigger: 'blur'
          }],
          status: [{
            required: true,
            message: '请选择商品状态',
            trigger: 'change'
          }],
          regionId: [{
            required: true,
            message: '请选择所属地州',
            trigger: 'change'
          }],
          brandId: [{
            required: true,
            message: '请选择所属品牌',
            trigger: 'change'
          }],
        },
        serviceIdsOptions: [{
          "label": "无优退货",
          "value": 1
        }, {
          "label": "快速退款",
          "value": 2
        }, {
          "label": "免费包邮",
          "value": 3
        }],
        statusOptions: [{
          "label": "可售",
          "value": "available"
        }, {
          "label": "缺货",
          "value": "out_of_stock"
        }],
        brandList: [],
        regionList: [],
        /** 优惠方式*/
        tab: 0,
      }
    },
    computed: {},
    watch: {
      value: {
        handler(val) {
          if (val) {
            this.formData = val
            this.tab=val.promotionType
          }
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
      this.getBrandNames()
      this.getRegionNames()
    },
    methods: {
      /** 删除阶梯行 */
      handleFullDelete(index) {
        this.formData.fullArr.splice(index, 1);
      },
      /** 添加一行 */
      handleFullAdd() {
        this.formData.fullArr.push({ fullPrice: 1, reducePrice: 0 })
      },
      /** 添加一行 */
      handleAdd() {
        this.formData.ladderArr.push({ count: 1, discount: 0 })
      },
      handleDelete(index) {
        this.formData.ladderArr.splice(index, 1);
      },
      /** 选择优惠方式 */
      tabType(val) {
        this.tab = val
        this.formData.promotionType = val
        // if (val == 0) {
        //   this.formData.ladderArr = [{ count: 0, discount: 0 }]
        //   this.formData.fullArr = [{ fullPrice: 0, reducePrice: 0 }]
        // } else if (val == 2) {
        //   this.formData.ladderArr = [{ count: 1, discount: 0 }]
        // } else if (val == 1) {
        //   this.formData.fullArr = [{ fullPrice: 0, reducePrice: 0 }]
        // }
      },
      /** 查询地区管理列表 */
      getBrandNames() {
        getBrandName().then(res => {
          this.brandList = res.data
        })
      },
      /** 查询品牌管理列表 */
      getRegionNames() {
        getRegionName().then(res => {
          this.regionList = res.data
        })
      },
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
        this.brandList = []
        this.regionList = []
      },
      validateForm() {
        return new Promise((resolve, reject) => {
          this.$refs.elForm.validate((valid) => {
            if (valid) {
              resolve(true);
            } else {
              reject(false);
            }
          });
        });
      }
    }
  }

</script>
<style scoped>
  .basic {
    width: 100%;
  }

  /deep/ .tab-active {
    background: #00afff;
    color: white;
  }
</style>
